<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fn() {
            // 拿到用户输入的所有东西
            var uname = document.querySelector("#uname").value; // value 属性就是表单元素的值
            var pwd = document.querySelector("#pwd").value;
            if (uname === '') {
                document.querySelector("#uname_show").innerText = "用户名不能为空";
                return false;
            }
            if (pwd === '') {
                document.querySelector("#pwd_show").innerText = "密码也不能为空";
                return false;
            }
            // 提交表单
            document.querySelector("form").submit();
        }
    </script>
</head>
<body>
<!-- form表示一个完整的单子 在给服务器传输数据的时候
    浏览器会自动的收集form表单中用户输入的内容.
    提交到服务器

    提交表单的逻辑:
    把表单元素的name=和表单的value
 -->
<form action="http://www.baidu.com">
    <!--    xuezhiqian=用户填的    -->
    用户名:<input type="text" name="xuezhiqian" id="uname"><span id="uname_show"></span><br/>
    密码:<input type="password" name="pwd" id="pwd"><span id="pwd_show"></span><br/>
    <!-- 浏览器默认的提交事件 | 后面要做验证来. 更换单纯的按钮 -->
    <input type="button" value="提交表单" onclick="fn();">
</form>
</body>
</html>